<template>
  <div>
    <div class="userBox">
      <div class="userInfo">
        <div class="userImg">
          <img
            v-if="!$store.state.userInfo.avatar"
            src="/src/img/images/nike.png"
          />
          <img v-else :src="avatar" />
          <van-button class="upload" @click="upload">上传</van-button>
          <input
            v-show="false"
            type="file"
            ref="avatar"
            @change="uploadAvatar"
          />
        </div>
        <div class="username">用户名:{{ $store.state.userInfo.username }}</div>
      </div>
      <van-cell-group>
        <van-cell title="修改密码" is-link></van-cell>
        <van-cell
          title="我的订单"
          @click="$router.push('/orderList')"
          is-link
        ></van-cell>
        <van-cell
          title="收货地址"
          @click="$router.push('/Myress')"
          is-link
        ></van-cell>
        <van-cell title="设置" is-link></van-cell>
        <van-cell title="建议留言" is-link></van-cell>
        <van-cell title="关于安福得物" value="v1.1.0"></van-cell>
      </van-cell-group>
      <!-- <router-link to="/address">我的地址</router-link> -->
      <van-button type="danger" block @click="logout">退出登录</van-button>
      <div class="beianbox">
        <div class="beian">
          <img src="../img/images/警徽.png" alt="" />
        </div>
        <div class="beiantext">粤ICP备2021160051号</div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
import { upload } from "@/api/user.js";
console.log(process.env.VUE_APP_BASE_URL);
export default {
  data() {
    return {
      // username: "",
      // password: "",
    };
  },
  computed: {
    avatar() {
      return (
        process.env.VUE_APP_BASE_URL + "/" + this.$store.state.userInfo.avatar
      );
    },
  },
  methods: {
    ...mapMutations(["clearUserInfo"]),
    logout() {
      //使用vuex清楚token
      let _this = this;
      this.$dialog
        .confirm({
          title: "确定离开吗",
        })
        .then(() => {
          _this.clearUserInfo();
          localStorage.removeItem("harvestAddress");
          _this.$router.replace("/home");
        })
        .catch(() => {});
    },
    async uploadAvatar() {
      let user_id = this.$store.state.userInfo.id;
      let file = this.$refs.avatar.files[0];

      if (file) {
        let formData = new FormData();
        formData.append("user_id", user_id);
        formData.append("file", file);
        // 更新用户头像
        let { message, status, src } = await upload(formData);
        this.$toast(message);
        if (status === 0) {
          // 修改vuex中的用户信息的头像
          this.$store.commit("updateAvatar", src);
        }
      }
    },
    upload() {
      //   触发input上传文件的单击事件
      this.$refs.avatar.click();
    },
  },
};
</script>

<style lang="scss" scoped>
.van-button--info {
  color: black;
  background-color: #fff;
  border: 1px solid #fff;
  font-family: "楷体", "楷体_GB2312";
  font-size: 18px;
}
.userBox {
  .userInfo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    background-color: darkslategrey;
    .userImg {
      width: 50px;
      img {
        width: 100%;
      }
    }
  }
  .beianbox {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .beian img {
      width: 50px;
    }
  }
}
</style>